<template>
  <view class="home">
    <image class="bg-logo" src="@/static/image/logo_bg.png" />
    <view class="provence-station-search">
      <ycy-picker v-model:value="currentPickerValue" :columns="provinceMap" defaultFirstLevelValue="重庆市">
        {{ currentProvince }}
      </ycy-picker>
      <view class="station-search">
        <up-search
          style="position: absolute; left: 50%; transform: translateX(-50%)"
          v-model="searchValue"
          placeholder="请输入检测站名称"
          :showAction="false"
        />
      </view>
    </view>
    <view class="home-title">
      <view class="home-title-first">
        <text class="first">中检车服</text>
        <text>办理年检</text>
      </view>
      <view class="home-title-second">
        <text>官方<text class="importment-text">权威</text></text>
        <text>安全<text class="importment-text">快捷</text></text>
      </view>
    </view>
    <view class="home-car-card">
      <ycy-car-card />
    </view>
    <view class="home-btn-container">
      <!-- <view class="btn-item" v-for="(item,index) in list" :key="index">
					<image :src="'/static/images/' + item.image" />
				</view> -->
      <navigator class="btn-item" hover-class="none" url="/pages/index?indexPageActive=1">
				<image class="btn-image" src="@/static/image/service/car_check.png" />
        <text>车辆年检</text>
      </navigator>
      <navigator class="btn-item" hover-class="none" url="/pages/index?indexPageActive=1">
				<image class="btn-image" src="@/static/image/service/car_search.png" />
        <text>车况查询</text>
      </navigator>
      <navigator class="btn-item" hover-class="none" url="/pages/index?indexPageActive=1">
				<image class="btn-image" src="@/static/image/service/car_money.png" />
        <text>车辆估值</text>
      </navigator>
      <navigator class="btn-item" hover-class="none" url="/pages/index?indexPageActive=1">
				<image class="btn-image" src="@/static/image/service/car_insurance.png" />
        <text>车险购买</text>
      </navigator>
    </view>
    <view class="home-extra">
      <Information />
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { provinceMap } from '@/static/js/dictionary.js';
  import Information from './components/information/information.vue';

  const searchValue = ref();
  const currentPickerValue = ref();
  const currentProvince = computed(() => (Array.isArray(currentPickerValue.value) ? currentPickerValue.value[0] : '重庆市'));
  // const loadImages = () => {
  //       const dir = '/static/images/'; // 你的图片所在目录
  //       const context = require.context(dir, false, /\.png$/);
  //       this.images = context.keys().map(key => {
  //         return {
  //           src: context(key)
  //         };
  //       });
  //     }
  // const list = [
  //   {
  //     image: 'car_money.png'
  //   },
  //   {
  //     image: 'car_money.png'
  //   },
  //   {
  //     image: 'car_money.png'
  //   },
  //   {
  //     image: 'car_money.png'
  //   },
  //   {
  //     image: 'car_insurance.png'
  //   }
  // ];
</script>

<style lang="scss" scoped>
  .home {
    position: relative;
    padding: 12px;
    padding-top: 102rpx;
    background: linear-gradient(to bottom, #0055a5 0, #f7f7f7 680rpx);
    // background: linear-gradient(to bottom, #0055a5 0, #ffffff 680rpx);

    .bg-logo {
      position: absolute;
      top: -3%;
      width: 800rpx;
      height: 720rpx;
      right: 0;
    }

    .provence-station-search {
      position: relative;
      display: flex;
      align-items: center;
      color: white;

      .station-search {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .home-title {
      margin-top: 32px;
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .home-title-first {
        color: white;
        font-size: 18px;
        letter-spacing: 4px;

        .first {
          margin-right: 12px;
        }
      }

      .home-title-second {
        margin-top: 4px;
        letter-spacing: 4px;
        padding: 0 12px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        height: 30px;
        display: flex;
        align-items: center;
        border-radius: 15px;
        z-index: 1;
        background-color: $uni-color-primary;

        .importment-text {
          color: yellow;
        }
      }
    }

    .home-btn-container {
      z-index: 1;
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
      grid-gap: 30px;
      justify-items: stretch; /* 子元素填满整个单元格的宽度 */
      align-items: stretch; /* 子元素填满整个单元格的高度 */
      .btn-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        aspect-ratio: 1 / 1; /* 元素的高/宽 */
        font-size: 14px;
        color: #333333;

        .btn-image {
          @include size(54px);
        }
      }
    }

    .home-extra {
      background-color: white;
      margin-top: 16px;
      padding: 12px;
      // height: 500px;
      border-radius: 8px;
    }
  }
</style>
